<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Button type="primary" @click="handleAllocation()">新增</Button>
            <Table size="small" :loading="tableLoading" :columns="columns" :data="data" class="ivu-mt-16">
                <template slot-scope="{ row }" slot="status">
                    <Button v-if="row.status ==='1'" type="success" size="small" @click="changeStatus(row)">启用</Button>
                    <Button v-if="row.status ==='0'" type="error" size="small" @click="changeStatus(row)">停用</Button>
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a @click="handleAllocation(row)">编辑</a>
                </template>
            </Table>
        </Card>
        <Modal v-model="modal" :title="edit ? '编辑' : '新增'" :mask-closable= "false" @on-cancel="handleDrawerCancel()">
            <Form :model="formItem" :rules="ruleValidate" ref="formItem" :label-width="80">
                <FormItem label="名称" prop="input">
                    <Input v-model="formItem.input" placeholder="请输入" clearable></Input>
                </FormItem>
                <FormItem label="状态" prop="switch">
                    <i-switch v-model="formItem.switch">
                        <span slot="open">On</span>
                        <span slot="close">Off</span>
                    </i-switch>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="handleDrawerCancel()">取消</Button>
                <Button type="primary" :loading="loading" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { GetCallbakList, CreateCallbak, UpdateCallbak, UpdateCallbakStatus } from '@api/setting';
    import { mapState } from 'vuex'

    export default {
        name: 'diagnosis',
        data () {
            return {
                modal: false,
                edit: false,
                loading: false,
                tableLoading: false,
                formItem: {
                    input: '',
                    switch: true
                },
                ruleValidate: {
                    input: [
                        { required: true, message: '回访状态名不可为空', trigger: 'blur' }
                    ]
                },
                columns: [
                    {
                        title: '名称',
                        key: 'callback_name'
                    },
                    {
                        title: '状态',
                        slot: 'status'
                    },
                    {
                        title: '操作',
                        slot: 'operation'
                    }
                ],
                data: []
            }
        },
        computed: {
            ...mapState(['admin']),
            projectId () {
                return this.admin.user.info.project_id
            }
        },
        created () {
            this.onLoad();
        },
        methods: {
            onLoad () {
                /**
                 * @description 回访状态列表 默认不传
                 * @param {Object} param page  {String} 页数
                 * @param {Object} param pageSize {String} 条数/页
                 */
                this.tableLoading = true
                GetCallbakList().then((res) => {
                    this.data = res.list
                }).finally(() => {
                    this.tableLoading = false
                })
            },

            handleAllocation (row) {
                this.modal = true;
                if (row) {
                    this.edit = true;
                    this.formItem = {
                        input: row.callback_name,
                        switch: row.status === '1',
                        id: row.id
                    }
                }
            },
            changeStatus (row) {
                const param = {
                    id: row.id,
                    status: row.status === '1' ? '0' : '1'
                }
                this.$Modal.confirm({
                    title: '切换回访状态状态',
                    content: '确定' + (row.status === '1' ? '停用' : '启用') + '当前回访状态?',
                    onOk: () => {
                        this.changeSubmit(param);
                    },
                    onCancel: () => {
                        console.log('取消切换')
                    }
                });
            },
            handleDrawerCancel () {
                this.modal = false;
                this.edit = false;
                this.$refs['formItem'].resetFields()
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        const params = {
                            callback_name: this.formItem.input,
                            status: this.formItem.switch ? '1' : '0',
                            project_id: this.projectId
                        }
                        if (this.edit) {
                            params.id = this.formItem.id;
                            this.updateSubmit(params);
                        } else {
                            this.createSubmit(params);
                        }
                    } else {
                        console.log('表单校验失败！')
                    }
                })
            },
            createSubmit (params) {
                CreateCallbak(params).then(() => {
                    this.$Message.success(' 创建成功');
                    this.loading = false;
                    this.onLoad();
                    this.handleDrawerCancel();
                }).catch(() => {
                    this.loading = false;
                })
            },
            updateSubmit (params) {
                UpdateCallbak(params).then(() => {
                    this.$Message.success(' 修改成功');
                    this.loading = false;
                    this.onLoad();
                    this.handleDrawerCancel();
                }).catch(() => {
                    this.loading = false;
                })
            },
            changeSubmit (params) {
                UpdateCallbakStatus(params).then(() => {
                    this.$Message.success('状态切换成功');
                    this.onLoad();
                }).catch(() => {})
            }

        }
    }
</script>

<style scoped>
</style>
